<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="black" name="apple-mobile-web-app-status-bar-style">
  <meta content="telephone=no" name="format-detection">
  <title>商品详情</title>
  <!-- 导入页面初始化文件 -->
  <link rel="stylesheet" href="../css/reset.css">
  <!-- 页面字体图标文件 -->
  <link rel="stylesheet" href="../res/fontAwesome/css/font-awesome.min.css" />
  <!-- mui UI插件 -->
  <link rel="stylesheet" href="../res/mui/css/mui.min.css" />
  <!-- 导入公共样式 -->
  <link rel="stylesheet" href="../css/common.css" />
  <!-- 当前页面样式 -->
  <link rel="stylesheet" href="../css/detail.css" />
  <!-- 网站图标 -->
  <link type="image/x-icon" rel="shortcut icon" href="../images/favicon.ico">
</head>

<body>
  <!-- 头部模块 -->
  <header class="lt-header mui-bar mui-bar-nav">
    <a href="javascript:history.back();" class="fa fa-arrow-left lt-header-back mui-pull-left"></a>
    <a href="../index.html" class="fa fa-home mui-pull-right lt-header-home"></a>
    <h1 class="mui-title lt-header-title">商品详情</h1>
  </header>
  <!-- 底部按钮区 -->
  <footer class="lt-detail-footer mui-bar mui-bar-tab">
    <span class="fa fa-shopping-cart product-shopping"></span>
    <button class="product-cart">加入购物车</button>
    <button class="product-buy">立即购买</button>
  </footer>
  <!-- 主体区域,回弹效果 -->
  <main class="mui-content mui-scroll-wrapper">
    <div class="mui-scroll">
      <!-- 轮播图 -->
      <div id="slider" class="mui-slider">
        <div class="mui-slider-group mui-slider-loop">
          <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
          <div class="mui-slider-item mui-slider-item-duplicate">
            <a href="#">
              <img src="../images/banner6.png">
            </a>
          </div>
          <!-- 第一张 -->
          <div class="mui-slider-item">
            <a href="#">
              <img src="../images/banner1.png">
            </a>
          </div>
          <!-- 第六张 -->
          <div class="mui-slider-item">
            <a href="#">
              <img src="../images/banner6.png">
            </a>
          </div>
          <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
          <div class="mui-slider-item mui-slider-item-duplicate">
            <a href="#">
              <img src="../images/banner1.png">
            </a>
          </div>
        </div>
        <div class="mui-slider-indicator">
          <div class="mui-indicator mui-active"></div>
          <div class="mui-indicator"></div>
          <div class="mui-indicator"></div>
          <div class="mui-indicator"></div>
          <div class="mui-indicator"></div>
          <div class="mui-indicator"></div>
        </div>
      </div>
      <!-- 商品名称 -->
      <p class="product-name">Sport飓风 Nike Kwazi 休闲运动鞋男 844839-002-001-100-400休息运动鞋休息运动鞋</p>
      <!-- 价格 -->
      <div class="product-price">
        <span>价格:</span>
        <strong class="old"> &yen;499.1</strong>
        <small class="new">&yen;888.1</small>
      </div>
      <!-- 尺码 -->
      <div class="product-size">
        尺码:
        <span>30</span>
        <span>31</span>
        <span>32</span>
        <span>33</span>
        <span>34</span>
        <span>35</span>
        <span>36</span>
        <span>37</span>
        <span>38</span>
        <span>39</span>
      </div>
      <!-- 数量 -->
      <div class="product-num">
        <span>数量</span>
        <div class="mui-numbox" data-numbox-min='0' data-numbox-max='100'>
          <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
          <input class="mui-numbox-input" type="number" />
          <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
        </div>
        <span>剩余20件</span>
      </div>
    </div>
  </main>
  <!-- 商品详情页模板 -->
  <script type="text/template" id="product-template">
    <!-- 轮播图 -->
    <div id="slider" class="mui-slider">
      <div class="mui-slider-group mui-slider-loop">
        <div class="mui-slider-item mui-slider-item-duplicate">
          <a href="#">
            <img src="<%=pic[0].picAddr%>">
          </a>
        </div>
        <!-- 第一张 -->
        <div class="mui-slider-item">
          <a href="#">
            <img src="<%=pic[0].picAddr%>">
          </a>
        </div>
        <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
        <div class="mui-slider-item mui-slider-item-duplicate">
          <a href="#">
            <img src="<%=pic[0].picAddr%>">
          </a>
        </div>
      </div>
      <div class="mui-slider-indicator">
        <div class="mui-indicator mui-active"></div>
      </div>
    </div>
    <!--商品名称 -->
    <p class="product-name"><%=proName%></p>
    <!--价格 -->
    <div class="product-price">
      <span>价格:</span>
      <strong class="old"> &yen;<%=price%></strong>
      <small class="new">&yen;<%=oldPrice%></small>
    </div>
    <!-- 尺码 -->
    <div class="product-size">
      尺码:
      <span>30</span>
      <span>31</span>
      <span>32</span>
      <span>33</span>
      <span>34</span>
      <span>35</span>
      <span>36</span>
      <span>37</span>
      <span>38</span>
      <span>39</span>
    </div>
    <!--数量 -->
    <div class="product-num">
      <span>数量</span>
      <div class="mui-numbox" data-numbox-min='0' data-numbox-max='<%=num%>'>
        <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
        <input class="mui-numbox-input" type="number" />
        <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
      </div>
      <span>剩余<%=num%>件</span>
    </div>
  </script>
  <!-- 尺码模板 -->
  <script type="text/template" id="size-template">
    尺码:
    <%for(var i =startNum ; i <= endNum;i++) {%>
      <span><%=i%></span>
    <%}%>
  </script>
    <script src="../res/mui/js/mui.min.js"></script>
    <script src="../res/./zepto/zepto.min.js"></script>
    <script src="../res/artTemplate/template-native.js"></script>
    <script src="../js/detail.js"></script>
</body>

</html>